<template>
  <div class="main">
    <el-card>
      <div type="flex">
        <el-input
          style="width: 200px; margin-right: 10px"
          size="small"
          v-model="page.title"
          placeholder="根据用户名搜索"
        ></el-input>
        <el-button size="small" @click="clearBtn">清空</el-button>
        <el-button size="small" type="primary" @click="searchBtn(page.title)"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-edit"
          type="success"
          size="small"
          justify="end"
          @click="isShowPerm = true"
          >新增权限组</el-button
        >
      </div>
      <div style="margin-top:20px;margin-bottom=20px">
        <el-alert :title="`共${page.total}条记录`" type="info" show-icon>
        </el-alert>
      </div>

      <div>
        <el-table
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="300"> </el-table-column>
          <el-table-column prop="title" label="用户名" width="300">
          </el-table-column>
          <el-table-column label="日期" width="500" prop="create_date">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="primary" icon="el-icon-edit" circle @click="updateBtn(row)"></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="delPerm(row)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next,total"
          :page-size.sync="page.size"
          :current-page.sync="page.page"
          :total="page.total"
          @current-change="changePage"
        />
      </el-row>
    </el-card>

    <!--TODO:添加菜单权限 -->

    <el-dialog title="创建权限组" :visible.sync="isShowPerm" width="width" >
      <el-form ref="form" :rules="rules" :model="dateValite" label-width="80px">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="dateValite.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
          ref= 'treeRef'
            :data="dataList"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[0]"
            :default-checked-keys="formDate.permissions"
            :props="defaultProps"
             @click="setCheckedNodes"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="addPerm(row)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, update, detail } from '@/api/base/permissions.js'
import { list as tlist } from '@/api/base/menus.js'

export default {
  data () {
    return {
      input: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      formDate: {
        id: 0,
        create_date: '',
        title: '',
        permissions: []
      },
      dateValite: {
        id: '',
        permissions: [],
        title: ''
      },
      dataList: [],
      tableList: [],
      isShowPerm: false,
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0, // 总数
        title: ''
      },
      rules: {
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      }
    }
  },

  created () {
    this.getPremList()
    this.getmenuList()
  },

  methods: {
    cancelBtn () {
      this.isShowPerm = false
      this.dateValite = {
        title: '',
        permissions: []
      }
    },

    // 获取选择的子节点的id
    getCheckedNodes () {
      const res = this.$refs.treeRef.getCheckedNodes()
      console.log(res)

      res.forEach((item, index) => {
        if (item.id) {
          this.dateValite.permissions.push(item.id)
        }
      })
      this.getPremList()
      this.getmenuList()
    },

    async getmenuList () {
      const { data } = await tlist()
      console.log(data)
      this.dataList = this.screenData(data)
      console.log(this.dataList)
    },
    // 点击添加权限
    async addPerm (data) {
      this.getCheckedNodes()
      await this.$refs.form.validate()
      await add(this.dateValite)
      this.$message.success('添加成功')
      this.getPremList()
      this.cancelBtn()
    },

    // 点击修改
    async updateBtn (data) {
      const res = await detail(data)
      this.dateValite = res.data
      this.isShowPerm = true
      this.setCheckedNodes(this.dateValite.permissions)
      await this.$refs.form.validate()
      await update(this.dateValite)
      // this.$message.success('修改成功')
      this.getmenuList()
      // this.cancelBtn()
    },
    // 全选反选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 获取列表数据，并渲染
    async getPremList () {
      const { data } = await list(this.page)
      console.log(data)
      console.log(data.list)
      this.tableList = data.list
      this.page.total = data.counts
      // this.getmenuList()
      // console.log(34567)
    },
    setCheckedNodes () {
      this.$refs.form.setCheckedNodes([this.dateValite])
    },
    // 搜索
    searchBtn () {
      this.getPremList()
    },
    // 清空
    clearBtn () {
      this.page.title = ''
      this.getPremList()
    },
    // 页面切换时更新
    changePage (newPage) {
      this.page.page = newPage
      this.getPremList()
    },
    // 删除
    async delPerm (data) {
      console.log(data)
      await this.$confirm('确定删除该用户？')
      await remove(data)
      this.$message.success('删除用户成功')
      this.getPremList()
    },
    // 树形
    screenData (data) {
      data.forEach((item, index) => {
        // console.log(item)
        item.children = []
        if (item.childs && item.childs.length > 0) {
          item.children = item.childs
          // console.log(item.children)
          item.childs.forEach((v, i) => {
            v.children = []
            if (v.points && v.points.length > 0) {
              v.children = v.points
              // console.log(v.points)
            }
          })
        } else if (item.points && item.points.length > 0) {
          item.children = []
        }
      })
      return data
    }

  }

}
</script>

<style scoped lang="less">
.main {
  margin: 20px 15px 0;
}
.el-button--danger {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.el-button--primary {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
</style>
